<template>
  <div>
    <div class="title-container">
      <h3 class="title" style="text-align: center;font-size: 20px;margin-bottom: 15px;">新增金额结算表</h3>
    </div>
    <el-form ref="addSaleMoneyForm" :model="saleMoneyVo" :rules="addSaleMoneyRules" class="register-form"
      label-width="120px">
      <el-form-item prop="sno" label="选货单编号" style="width: 500px;">
        <el-select v-model="saleMoneyVo.sno" filterable placeholder="请选择选货单编号" clearable style="width: 400px;" ref="sno"
          @change="search">
          <el-option v-for="item in snoList" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="选货单总价" style="width: 500px;">
        <el-input v-model="money" tabindex="1" style="width: 400px;" :disabled="true" class="uninput" />
      </el-form-item>

      <el-form-item prop="type" label="结算单类型" style="width: 500px;">
        <el-select v-model="saleMoneyVo.type" filterable placeholder="请选择结算单类型" clearable style="width: 400px;"
          ref="type">
          <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="totalPrice" label="付款金额" style="width: 500px;">
        <el-input ref="totalPrice" v-model="saleMoneyVo.totalPrice" placeholder="请输入付款金额" tabindex="1"
          style="width: 400px;" />
      </el-form-item>
    </el-form>

    <div style="text-align: center;">
      <el-button type="primary" style="width:200px;margin-bottom:30px;"
        @click.native.prevent="addSaleMoney()">创建</el-button>
      <el-button type="primary" style="width:200px;margin-bottom:30px;" @click.native.prevent="cancel()">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var validatePrice = (rule, value, callback) => {
      const pattern = /^(([1-9]{1}\d*)|(0{1}))(\.\d{2})$/;
      if (!value) {
        return callback(new Error('付款金额不能为空'));
      }
      if (pattern.test(value)) {
        callback();
      } else {
        callback(new Error('付款金额必须是两位小数'));
      }
    };
    return {
      // 这里放数据
      snoList: [],
      typeList: [
        { id: 1, name: '定金' },
        { id: 2, name: '尾款' },
      ],
      saleMoneyVo: {
        sno: "",
        type: "",
        totalPrice: "",
      },
      addSaleMoneyRules: {
        sno: [{ required: true, trigger: 'blur', message: '选货单编号不能为空' }],
        type: [{ required: true, trigger: 'blur', message: '金额结算表类型不能为空' }],
        totalPrice: [{ required: true, validator: validatePrice, trigger: 'blur' }]
      },
      money: 0,
    }
  },
  methods: {
    search: function () {
      console.log(this.saleMoneyVo.sno);
      if (this.saleMoneyVo.sno == "") {
        this.money = 0;
      }
      this.$axios.get("saleOrder/findTotalPriceBySno/" + this.saleMoneyVo.sno).then(res => {
        console.log(res.data.data);
        this.money = res.data.data;
      })
    },
    cancel: function () {
      this.saleMoneyVo.sno = ""
      this.saleMoneyVo.type = ""
      this.saleMoneyVo.totalPrice = ""
      this.money = 0;
    },
    addSaleMoney: function () {
      this.$refs.addSaleMoneyForm.validate(valid => {
        if (valid) {
          this.$axios.post("saleMoney/add", this.saleMoneyVo).then(res => {
            console.log("新增");
            console.log(res.data);
            if (res.data.code == 200) {
              this.$message.success('新增成功!')
              this.cancel();
              this.$refs.addSaleMoneyForm.resetFields();
            } else {
              this.$message.error('新增失败:' + res.data.message)
              this.cancel();
              this.$refs.addSaleMoneyForm.resetFields()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    findAllSno: function () {
      this.$axios.get("saleOrder/findAllSno").then(res => {
        if (res.data.code == 200) {
          this.snoList = res.data.data;
          console.log(res.data.data);
        }
      })
    },
  },
  mounted: function () {
    this.findAllSno();
  }
}
</script>

<style scoped>
.register-form {
  margin-left: 345px;
}

.uninput {
  -webkit-text-fill-color: #3d3d3d !important;
  font-size: 15px;
  font-weight: bolder;
}</style>
